<template>
    <div style="background: #F4F4F4;height: 1000px">
      <!--导航栏-->
      <div class="a7">
        <div class="a3">
          <div class="a4"><img src="../../assets/a1.png" height="30" width="110" class="aa"/></div>
          <div class="a5">
            <button class="a5a">
              <router-link :to="'Home'">首页</router-link>
            </button>
            <button class="a5a">
              <router-link :to="'MyActive'">我的活动</router-link>
            </button>
            <button class="a5a">
              <router-link :to="'MyTribe'">我的部落</router-link>
            </button>
            <button class="a5a">
              <router-link :to="'MyInfo'">个人信息</router-link>
            </button>
            <button class="a5a">
              <router-link :to="'SecondClass'">第二课堂成绩单</router-link>
            </button>
            <button class="a5a">APP下载</button>
          </div>
          <div class="a6">
            <div style="width: 300px"></div>
            <div class="a6a"></div>
            <div class="a6a"></div>
            <div class="a6aa"></div>
          </div>
        </div>
      </div>

      <div class="h1">
        <div class="h2">

          <!--面包屑-->
          <div class="h3">
            <div>
              <router-link :to="'Home'">首页</router-link>
            </div>
            <div> ></div>
            <div>
              <router-link :to="'AllNews'">公告</router-link>
            </div>
            <div> ></div>
            <div>公告详情</div>
          </div>

          <div class="h4">
            <div class="h5">{{name}}</div>
            <div class="h6">{{date}}</div>
            <div class="h7"><p>{{content}}</p></div>
          </div>

        </div>
      </div>

      <!--页尾-->
      <div class="c1">
        <div class="c2">
          <div class="c3">
            <div>到梦简介</div>
            <div>到梦协议</div>
            <div>到梦服务</div>
            <div>第二课堂全国活动查询</div>
            <div>第二课堂全国活动证书查询</div>
            <div>校企共建</div>
            <div>问题与帮助</div>
            <div>联系我们</div>
            <div>APP使用说明</div>
            <div>盗梦空间使用章程和制度</div>
          </div>
          <div class="c4"></div>
          <div class="c5">
            <div>京公网安备11010802024175 到梦空间系统</div>
            <div>2016-2021 Copyright©全国共青团研究中心</div>
          </div>
        </div>
      </div>

    </div>
</template>

<script>
    export default {
        name: "NewsDetail",
      data(){
          return{

          }
      },
      methods:{

      },
      created() {
          this.name=sessionStorage.getItem("news_name")
          this.date=sessionStorage.getItem("news_date")
          this.content=sessionStorage.getItem("news_content")
      }
    }
</script>

<style scoped>
  .a5>button{
    border: none;
    background-color: transparent;
    box-shadow: none;
  }
  a{
    color: black;
    text-decoration: none;
  }
  .h3>div>a{
    color: gray;
  }
  .b8>a{
    text-decoration: none;
    color: orange;
  }
  .b8>a:hover{
    color: gold;
    cursor: pointer;
  }
  .a7{
    width: 100%;
    height: 60px;
    position: fixed;
    z-index: 2;
    background:#FFFFFF ;
    box-shadow: 0 5px 10px 0 #E2E2E2;
  }
  .a3{
    display: flex;
    width: 1210px;
    height: 50px;
    margin: auto;
  }
  .a4{
    width: 100px;
    height: 55px;
    display: grid;
    align-items: center;
    cursor: pointer;
  }
  .a5{
    flex: 1;
    font-size: 13px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .a5a:hover{
    cursor: pointer;
    color: gold;
  }
  .a5a>a:hover{
    cursor: pointer;
    color: gold;
  }
  .a6{
    font-size: 13px;
    width: 500px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .a6a:hover{
    cursor: pointer;
  }
  .a6aa:hover{
    cursor: pointer;
    color: darkgray;
  }
  .c1{
    background: #D6D8DA;
    margin-top: 1000px;
    width: 100%;
    height: 100px;
    position: absolute;
  }
  .c2{
    width: 1210px;
    margin: auto;
  }
  .c3{
    height: 40px;
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    align-items: center;
    color: black;
    cursor: pointer;
  }
  .c4{
    border-bottom: 1px solid darkgray;
    margin-top: 10px;
  }
  .c5{
    width: 700px;
    margin: auto;
    margin-top: 20px;
    display: flex;
    font-size: 13px;
    justify-content: space-evenly;
    color: black;
  }
.h1{
  position: absolute;
  width: 100%;
  margin-top: 80px;
}
  .h2{
    width: 1120px;
    height: 850px;
    background: white;
    margin: auto;
  }
  .h3{
    display: flex;
    font-size: 12px;
    cursor: pointer;
    color: gray;
    padding-top: 10px;
    padding-left: 10px;
  }
  .h4{
    margin: auto;
    margin-top: 50px;
    width: 1000px;

  }
  .h5{
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }
  .h6{
    color: gray;
    margin-top: 5px;
    font-size: 14px;
    text-align: center;
  }
  .h7{
    margin-top: 40px;
    color: gray;
    font-size: 12px;
  }
</style>
